<script setup lang="ts">
import myAuth from "@/composables/myAuth.ts";

const {form,login} = myAuth();
const onSubmit = async ()=>{
  await login(form);
}

</script>

<template>
<main class="all">
  <div class="main">
    <div class="image">
      <img src="/images/login.jpg" alt="login" />
    </div>
    <div class="form">
      <h3>会员登录</h3>
      <div class="inputs">
        <form-input  type="text" placeholder="请输入账号" v-model="form.phone" v-clearError="'phone'"/>
        <my-error name="phone"/>
        <form-input class="input mt-5" type="password" placeholder="请输入密码" v-model="form.password" v-clearError="'password'"/>
        <my-error name="password"/>
        <my-captcha class="mt-3"
                    v-model:captcha_code="form.captcha_code"
                    v-model:captcha_key="form.captcha_key"
        />
        <my-error name="captcha_code"/>
        <form-button @click="onSubmit"><icon-me/>登录</form-button>
        <layout-auth-footer />
      </div>
    </div>
  </div>
</main>
</template>

<style lang="scss" scoped>
main.all{
  @apply h-screen bg-slate-300 flex justify-center items-center;
  div.main{
    @apply bg-white w-[720px] grid grid-cols-2 rounded overflow-hidden shadow;
    div.image{
      @apply relative;
     img{
       @apply absolute w-[360px] h-full object-cover;
     }
    }
    div.form{
      @apply p-6;
        h3{
          @apply text-gray-700 font-bold text-center;
        }
      div.inputs{
        @apply flex flex-col mt-4;
        input.input{
          @apply p-2 border border-slate-400 rounded-sm outline-none
           ring-offset-2 ring-pink-600 focus:ring-1 focus:border-white duration-300
          placeholder:text-sm text-gray-600;
        }
        div.error{
          @apply bg-red-300 p-1 text-white mt-1 text-xs flex items-center gap-1;

        }
      }
    }
  }
}
</style>